<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.global.js"></script>
		<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f4f4f4;
				margin: 0;
				padding: 20px;
			}
			#app {
				background: white;
				padding: 20px;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}
			.search {
				margin-bottom: 20px;
			}
			.search input {
				width: 100%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			ul {
				list-style: none;
				padding: 0;
			}
			li {
				padding: 10px;
				border-bottom: 1px solid #eee;
				transition: background 0.3s;
			}
			li:hover {
				background: #f9f9f9;
			}
			a {
				text-decoration: none;
				color: #333;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			em {
				color: red;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="search">
				<input type="text" v-model="keywords">
			</div>
			<ul>
				<li v-for="news in selectedList">
					<a href="">{{news.title}} 
						<span>{{formatViews(news.views)}}</span>
						<em v-if="news.ishot">热</em>
						<em v-if="news.isnew">新</em>
					</a>
				</li>
			</ul>
		</div>
		<script>
			 Vue.createApp({
				 data(){
					 return{
						 keywords:'',
						 newsList:[
							{id:1,title:"男子高空……",views:3333000,ishot:0,isnew:0},
							{id:2,title:"受害家属……",views:4333000,ishot:0,isnew:0},
							{id:3,title: "手工耿……",views:5333000,ishot:1,isnew:0},
							{id:4,title:"耳蜗丢失……",views:333666,ishot:0,ishot:0,isnew:0},
							{id:5,title:"65岁老人……",views:7833000,ishot:0,isnew:1},
							{id:6,title: "美国电子战……",views:4333000,ishot:0,isnew:0} 
							
							
						 ]
					 }
				},
				computed:{
					selectedList(){
						let list = this.newsList.filter((news)=>{
							return news.title.indexOf(this.keywords)!=-1
						})
						return list
					}
				},
				methods: {
					formatViews(views) {
						return views > 10000 ? `${(views / 10000).toFixed(0)}万` : views;
					}
				}
			 }).mount('#app')
		</script>
	</body>
</html>